import React, { Component } from 'react';
import { WhiteSpace,  NavBar,  } from 'antd-mobile';
import {LeftOutlined, MessageOutlined } from '@ant-design/icons';
import TabBar from '../../components/tabbar/index'

//----------------
import AppPage from '../../container/AppPage'// 容器 解决 navbar

import BarHeader from './header'
import ShowContainer from './showContainer'

import { BackTop } from 'antd';
export default class MsgCard extends Component {
    constructor(props) {
        super(props)
        this.state={
            showTitle:false
        }
    }
    onBack = () => {
        window.history.back()
    }
    //在componentDidMount，进行scroll事件的注册，绑定一个函数，让这个函数进行监听处理
    componentDidMount() {
        window.addEventListener('scroll', this.bindHandleScroll)
    }
    bindHandleScroll = (event) => {
        // 滚动的高度
        const scrollTop = (event.srcElement ? event.srcElement.documentElement.scrollTop : false)
            || window.pageYOffset
            || (event.srcElement ? event.srcElement.body.scrollTop : 0);
        // 判断用户当前是否进行了横向滚动，如果用户发生了横向滚动，则设置元素为static
       if(scrollTop>=60){
           this.setState({
               showTitle:true
           })
       }
       if(scrollTop<=60){
           this.setState({
               showTitle:false
           })
       }
    //    console.log(scrollTop)
    }
    //在componentWillUnmount，进行scroll事件的注销
    componentWillUnmount() {
        window.removeEventListener('scroll', this.bindHandleScroll);
    }


    render() {

        return (
                <div>
                    <BackTop visibilityHeight={200}></BackTop>
                    <NavBar
                        leftContent={<LeftOutlined style={{ fontSize: 20, color: '#fff' }} />}
                        onLeftClick={this.onBack}
                        rightContent={[
                            <MessageOutlined style={{ fontSize: 20 }}></MessageOutlined>]}
                    style={{ backgroundColor:'#2980B9'}}
                >{this.state.showTitle ? `内蒙古xxx吧`:null} </NavBar>
                    <AppPage>
                        <BarHeader></BarHeader>
                        <WhiteSpace size='lg'></WhiteSpace>
                        <WhiteSpace size='lg'></WhiteSpace>
                        <ShowContainer></ShowContainer>
                        <TabBar />
                    </AppPage>
                  
                </div>
           
        )
    }
}
